
setTimeout(() => {


  //弹出登录注册界面
  $("#user").on('click', '.user', function (e) {
    if ($(e.target).text() == "登录") {
      $('.text1').css({ 'display': "inline-block" })
      $('.text2').css({ 'display': "none" })
      $('#tab-login').css({ 'border-bottom': "2px solid red" })
      $('#tab-register').css({ 'border-bottom': "" })
      let users = localStorage.getItem("users")
      if (users) {
        code();
        remember();
      }
    } else {
      $('.text2').css({ 'display': "inline-block" })
      $('.text1').css({ 'display': "none" })
      $('#tab-login').css({ 'border-bottom': "" })
      $('#tab-register').css({ 'border-bottom': "2px solid red" })
    }
    $(".interface").slideDown();
    //tab切换
    $('.change').on('click', 'li', function () {
      var $text = $(this).text();
      //获取切换的值,并且根据相应的值显示相应的内容
      if ($text == "登录") {
        $('.text1').css({ 'display': "inline-block" })
        $('.text2').css({ 'display': "none" })
        $('#tab-login').css({ 'border-bottom': "2px solid red" })
        $('#tab-register').css({ 'border-bottom': "" })
      } else {
        $('.text2').css({ 'display': "inline-block" })
        $('.text1').css({ 'display': "none" })
        $('#tab-login').css({ 'border-bottom': "" })
        $('#tab-register').css({ 'border-bottom': "2px solid red" })
      }
    })
  });
  //关闭登录注册界面
  $("#newclose").click(function () {
    $(".interface").slideToggle();
  });

  var phonelock = false;
  var passlock = false;
  let loginCode = false;
  //登录
  // 手机号格式检测
  $('#loginPhone').blur(function () {
    var phone = $('#loginPhone').val();
    var res = /^1[3-9][0-9]{9}$/
    var result = res.test(phone);
    if (result) {
      $('#loginPhone').css({ 'border': "1px solid green" });
      $('.phone-msg').text("");
      phonelock = true;
    } else {
      $('#loginPass').css({ 'border': "1px solid red" })
      $('.phone-msg').text("请输入正确11位手机号码");
      phonelock = false;
    }
  })
  // 密码格式检测
  $('#loginPass').blur(function () {
    var pass = $('#loginPass').val();
    var res = /^[0-9a-zA-Z]{6,11}$/
    var result = res.test(pass);
    if (result) {
      $('#loginPass').css({ 'border': "1px solid green" });
      $('.pass-msg').text("");
      passlock = true;
    } else {
      $('#loginPass').css({ 'border': "1px solid red" })
      $('.pass-msg').text("请输入正确6~11位字母或数字");
      passlock = false;
    }
  })
  // 验证码
  $("#showCode").on('click', () => code());
  let code = () => {
    let code = "";
    let words = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789".split("");
    for (let i = 0; i < 4; i++) {
      let rand = parseInt(Math.random() * words.length - 1);
      code += words[rand];
    }
    $("#showCode").text(code);
  }
  code();
  $("#code").on('blur', function () {
    if ($("#code").val() == $("#showCode").text()) {
      loginCode = true;
    } else {
      loginCode = false;
    }
  })




  //注册
  // 手机号格式检测
  $('#regPhone').blur(function () {
    // var $result=$('#remember').attr("checked") ;
    var phone = $('#regPhone').val();
    var res = /^1[3-9][0-9]{9}$/;
    var result = res.test(phone);
    if (result) {
      $('#regPhone').css({ 'border': "1px solid green" });
      $('.regphone-msg').text("");
      phonelock = true;
    } else {
      $('#regPhone').css({ 'border': "1px solid red" })
      $('.regphone-msg').text("请输入正确的手机号码");
      phonelock = false;
    }
  })
  // 密码格式检测
  $('#regPass').blur(function () {
    // var $result=$('#remember').attr("checked") ;
    var pass = $('#regPass').val();
    var res = /^[0-9a-zA-Z]{6,11}$/
    var result = res.test(pass);
    if (result) {
      $('#regPass').css({ 'border': "1px solid green" });
      $('.regPass-msg').text("");
      passlock = true;
    } else {
      $('#regPass').css({ 'border': "1px solid red" })
      $('.regPass-msg').text("请输入正确6~11位字母或数字");
      passlock = false;
    }
  })
  $('#repass').blur(function () {
    // var $result=$('#remember').attr("checked") ;
    if ($("#regPass").val() == $("#repass").val()) {
      $('#pass').css({ 'border': "1px solid green" });
      $('.passes').text("");
      passlock = true;
    } else {
      $('#repass').css({ 'border': "1px solid red" })
      $('.rePass-msg').text("两次密码不一致");
      passlock = false;
    }
  })




  // 注册事件
  $("#register").click(() => {
    if (phonelock && passlock) {
      register();
      phonelock = false;
      passlock = false;
    } else {
      alert("用户名或密码不正确~");
    }
  });

  // 注册函数
  function register() {
    // 创建对象
    let user = $("#regPhone").val();
    let pass = $("#regPass").val();
    let reguser = {
      user,
      pass
    }
    // 获取本地用户数据
    let users = localStorage.getItem("users");
    // 判断是否为空
    if (users == null) {
      // 创建数组
      users = [];
    } else {
      // 解析成数组对象
      users = JSON.parse(users);
    }
    // 判断重复用户名
    let flag = users.some(users => users.user == reguser.user);
    // 将对象添加进数组
    if (!flag) {
      users.push(reguser);
      alert("注册成功");
    } else {
      alert("手机号被已注册")
    }
    // 将数组对象转换为字符串
    users = JSON.stringify(users);
    // 将转换好的字符串保存至本地
    localStorage.setItem("users", users);
  }

  // 登陆点击事件
  $('#login').click(function () {
    let users = localStorage.getItem("users");
    if (users) {
      users = JSON.parse(users);
      let flag = users.some(user => user.user == $("#loginPhone").val() && user.pass == $("#loginPass").val());
      if (flag) {
        phonelock = true;
        passlock = true;
      }
      if (phonelock && passlock && loginCode) {
        if ($("#reading").prop("checked")) {
          login();
          phonelock = false;
          passlock = false;
          $("#code").val("");
          loginCode = false;
        } else {
          alert("请阅读并同意协议")
        }
      } else {
        alert("手机号或密码不正确");
      }
    } else {
      alert("请先注册");
    }
  })
  // 登录函数
  function login() {
    let users = JSON.parse(localStorage.getItem("users"));
    let flag = users.some(user => user.user == $("#loginPhone").val() && user.pass == $("#loginPass").val());
    if (flag) {
      // 在线用户状态储存
      users.forEach(user => {
        if (user.user == $("#loginPhone").val()) {
          let loginUser = {
            user: $("#loginPhone").val(),
            pass: $("#loginPass").val(),
            name: user.name
          }
          if (loginUser.name) {
            $(".user").html(
              `<div><a>欢迎 ${loginUser.name}</a></div>
              <div id="signout"><a>注销</a></div>`
            );
            alert("登录成功");
            $(".interface").slideToggle();
          } else {
            $(".user").html(
              `<div><a>欢迎 ${$("#loginPhone").val()}</a></div>
                <div id="signout"><a>注销</a></div>`
            );
            alert("登录成功");
            $(".interface").slideToggle();
          }
          loginUser = JSON.stringify(loginUser)
          localStorage.setItem("loginUser", loginUser);
        }
      });
    } else {
      alert("用户名或密码错误");
    }
  }

  // 用户在线渲染
  (() => {
    let loginUser = localStorage.getItem("loginUser");
    let users = localStorage.getItem("users")
    if (loginUser) {
      loginUser = JSON.parse(loginUser);
      users = JSON.parse(users);
      users.forEach(user => {
        if (user.user == loginUser.user) {
          loginUser.name = user.name;
        }
      });
      if (loginUser.name) {
        $(".user").html(
          `<div><a>欢迎 ${loginUser.name}</a></div>
          <div id="signout"><a>注销</a></div>`
        );
      } else {
        $(".user").html(
          `<div><a>欢迎 ${loginUser.user}</a></div>
          <div id="signout"><a>注销</a></div>`
        );
      }
    }
  })();

  // 退出登录
  $(".user").on('click', '#signout', function () {
    localStorage.setItem("loginUser", "");
    alert("成功退出~");
    $(".user").html(
      `<div id="btn-login"><a href="#">登录</a></div>
      <div id="btn-register">注册</div>`
    );
  });

  // 记住密码
  $("#remember").change(function () {
    if ($("#remember").prop("checked")) {
      let remUser = localStorage.getItem("remUser");
      if (remUser == null) {
        remUser = [];
      } else {
        remUser = remUser.split(",");
      }
      let remember = `${$("#loginPhone").val()}-${$("#loginPass").val()}`;
      localStorage.setItem("remUser", remember);
    } else {
      localStorage.setItem("remUser", "");
    }
  });
  // 记住密码页面渲染
  function remember() {
    remdata = localStorage.getItem("remUser").split("-");
    $("#loginPhone").val(remdata[0]);
    $("#loginPass").val(remdata[1]);
    if (remdata.length == 2) {
      $("#remember").prop("checked", true);
      let users = localStorage.getItem("users");
      users = JSON.parse(users);
      let flag = users.some(user => user.user == $("#loginPhone").val() && user.pass == $("#loginPass").val());
      if (flag) {
        phonelock = true;
        passlock = true;
      }
    } else {
      $("#remember").prop("checked", false);
    }
  };
}, 1000);